<template>
	<view class="padding-top-sm padding-left-sm padding-bottom-sm" >
		<view class=" flex justify-between align-center">
			<view class="w-25 relative">
				<view class="bg-10"></view>
				<view class="absolute left0 top0 w-100 h-100 flex justify-center">
					<view class="cu-avatar round xl" :style="{backgroundImage: `url(${jl.jcover})`}"></view>
					
				</view>
			</view>
			<view class="w-75 padding-left-sm flex flex-direction justify-between">
				<view class="flex justify-between align-center padding-xs">
					<view class="text-bold text-black text-xl ">{{jl.jlname}}</view>
					<uni-rate v-model="jl.count"></uni-rate>
				</view>
				<view class="flex justify-start align-baseline">
					<view v-for="(lxid, index) in jl.lx" :key="index"
						class="text-sm bg-g-main radius text-main padding-xs margin-left-xs">{{lxmap[lxid].lxname}}</view>
					
				</view>
				<view class="text-gray text-sm flex justify-between align-baseline">
					<view class="padding-left-xs">
						<button @tap="gotoJlDetile(jl.jlid)" class="cu-btn sm bg-pink">详细</button>
					</view>
					<text class="bg-pink padding-xs round-left">{{jl.kcs}}个课程</text>
				</view>
				
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			jl: {
				type: Object,
				default: {}
			},
			path: {
				type: String,
				default: ""
			}
		},
		data: function() {
			return {
				lxmap: this.constant.lxmap,
			};
		},
		methods: {
			gotoJlDetile: function(jlid) {
				uni.navigateTo({
					url: this.path+'/jlxx?jlid='+jlid
				});
			},
		}
	}
</script>

<style scoped>

</style>